<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>ES6(ES2015)——IE10+、Chrome、FIreFox、移动端、NodeJS</title>
<script>
{
  // 面向对象
  class User {
    constructor (name, pass) {
      this.name = name
      this.pass = pass
    }

    showName () {
      alert(this.name)
    }

    showPass () {
      alert(this.pass)
    }
  }
  let zs = new User('zhangsan', '123456')
  zs.showName()
  zs.showPass()
  
  class VipUser extends User {
    constructor (name, pass, level) {
      super(name, pass)
      this.level = level
    }

    showLevel () {
      alert(this.level)
    }
  }
  let ls = new VipUser('lisi', 'abcdefg', '3')
  ls.showName()
  ls.showPass()
  ls.showLevel()
}
</script>
<script>
{
  // Promise
  let p1 = new Promise((reslove, reject) => {
    // 异步代码
    // reslove —— 成功了
    // reject —— 失败了

    $.ajax({
      url: 'a.json',
      dataType: 'json',
      success (data) {
        reslove(data)
      },
      error (err) {
        reject(err)
      }
    })
  })
  let p2 = new Promise((reslove, reject) => {
    // 异步代码
    // reslove —— 成功了
    // reject —— 失败了

    $.ajax({
      url: 'b.json',
      dataType: 'json',
      success (data) {
        reslove(data)
      },
      error (err) {
        reject(err)
      }
    })
  })
  // 使用
  p1.then(
    data => { alert(`成功了:${data}`) },
    err => { alert(`失败了：${err}`) }
  )
  // 全部执行多个方法
  Promise.all([p1, p2]).then(
    arr => {
      alert('全成功了：返回多个请求结果并封装成一个数组')
      let [res1, res2] = arr  // 解构赋值
    },
    err => { alert(`至少失败了一个`) }
  )
  // 扩展封装
}
</script>
<script>
{
  // generator
  function *show () {
    alert('a')
    yield
    alert('b')
  }
  let genObj = show()
  genObj.next()
  genObj.next()
}
</script>
<script>
{
  // generator-yield-传参
  function *show () {
    alert('a')
    let a = yield
    alert('b')
    alert(a)
  }
  let genObj = show()
  genObj.next(12) // 第一个是废的
  genObj.next(5)
}
</script>
<script>
{
  // generator-yield-出参
  function* show () {
    alert('a')
    yield 12
    alert('b')
    return 55 // 最后一步的结果
  }
  let gen = show()

  let res1 = gen.next()
  let res2 = gen.next()

  console.log(res1)
  console.log(res2)
}
</script>
<script>
{
}
</script>
</head>

<body>
  <h6>1.变量：let、const</h6>
  <h6>2.函数：箭头函数|()=>{}|、参数扩展|...|、数组展开|...|、默认参数|(a=6, b=1) => {}|</h6>
  <h6>3.解构赋值：|[a, b] = [1, 2]|</h6>
  <h6>4.数组：map、reduce、filter、forEach</h6>
  <h6>5.字符串：startsWith、endsWith、字符串模板|`反单引号`|</h6>
  <h6>6.面向对象：class关键字、构造器和类分开了constructor、class里面直接加方法</h6>
  <h6>7.面向对象-继承：extends、super</h6>
  <h6>8.Json：JSON对象|串行化JSON.stringify(json);JSON.parse(str);|、简写|name和value一样{a ,b , c: 5};方法直接省去:function|</h6>
  <h6>9.Promise：用同步方式封装异步请求，Promise.all([]).then(fn, fn)、Promise.race([]).then(fn, fn)</h6>
  <h6>10.generator：不能写成箭头函数。|function *xxx() {}| 生成器，中间可以停止的函数。</h6>
  <h6>11.generator-yield：可传参又可返回。</h6>
  <h6>12.模块化：</h6>
</body>

</html>